body{
    margin: 0 auto;
}
.left{
    display: inline-block;
    width: 20%;
    height: 740px;
    background-color: #5069c5;
    margin: 0 auto;
}
.id,.done,.list,.out-time,.todo{
    display: inline-block;
    width: 80%;
    margin-bottom: 35px;
    font-size: 20px;
    color: #fffffd;
    margin-left: 20px;
    cursor: pointer;
}
.id{
    margin-top:40px; 
    width: 74%;
}
.word{
    display: inline-block;
}
.icon,.search{
    height: 25px;
    width: 25px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 3px;
}
.search{
    display: inline-block;
    cursor: pointer;
}
.right{
    width: 79.5%;
    height: 740px;
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
}
.right-head{
    height: 60px;
    border-bottom: 1px solid #d9d9d9;
}
.slide{
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-top: 22px;
    cursor: pointer;
}
.today{
    color: white;
    display: inline-block;
    margin-left: 30px;
    border: 1px solid #d9d9d9;
    font-size: 15px;
    width: 40px;
    text-align: center;
    cursor: pointer;
    background-color:#2cbff3 ;
}
.right-middle,.right-foot{
    height: 339px;
    width: 100%;
    border-bottom: 1px solid #d9d9d9;
}
.add-list,.check-content,.add-item,.add-remake{
    width: 49.7%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}
.add-list,.check-content{
     border-right: 1px solid #d9d9d9;
}
.item-content,.list-content,.item,.item-remake{
    margin-left: 1.5%;
    height: 12%;
    width: 96%;
    margin-top: 3%;
}
.input{
    margin-top: 1.4%;
    font-size: 15px;
    height: 33px;
    width:99.6%;
    border-top: none;
    border-bottom: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    border-left: 1px solid #d9d9d9;
}
.word-content,.word-item,.word-list,.word-remake{
    font-size: 18px;
    display: inline-block;
    font-size: 18px;
    display: inline-block;
    margin-left: 2%;
    vertical-align: text-bottom;
}
.add-icon{
    width: 20px;
    height: 20px;
    display: inline-block;
    padding-top: 1.5%;
    padding-left: 83%;
    cursor: pointer;
}
.item-content{
    background: #d6f4fe;
}
.item-remake{
    background: #eeffed;
}
.item{
    background: #ffefcb;
}
.list-content{
    background: #ffede7;
}
.word-list{
    color: #f9aea9;
}
.word-item{
    color: #ffd099;
}
.word-content{
    color: #8cd7ee;
}
.word-remake{
    color: #bae3a9;
    margin-top: 1.4%;
}
.clearbutton{
    margin-top: 1%;
    width: 2.5%;
    height: 2.5%;
    display: inline-block;
    float: right;
    margin-right: 5%;
}
.todolist{
    font-size: 18px;
    height: 60%;
    width: 90%;
    padding-top: 20px;
    overflow: hidden;
}
.todolist:hover{
    overflow: auto;
}
.number{
    font-size: 20px;
    color: #d9d9d9;
    float: right;
}
.lists{
    margin-top: 1px;
    height: 16px;
    width: 16px;
    cursor: pointer;
    vertical-align: middle;
}
.tip-none{
    text-align: center;
    font-size: 25px;
    margin-top: 20%;
    color: #ffd099;
}
.tip-content_blue{
    text-align: center;
    font-size: 25px;
    margin-top: 20%;
    color: #8cd7ee;
}
.content_style{
    font-size: 16px;
    height: 60%;
    width: 90%;
    padding-top:8%;
    overflow: hidden;
}
.clearbutton_content{
    margin-top: 1%;
    width: 2.5%;
    height: 2.5%;
    display: inline-block;
    float: right;
    margin-right: 1%;
}
.contents_word{
    margin-left: 10%;
}
.time,.time1,.xianshi{
    margin-top: 50px;
    font-size: 16px;
    margin-left: 40px;
    color: #bae3a9;
    cursor: pointer;
}
.NowDate{
    display: inline-block;
    margin-left: 10px;
    color: #d9d9d9;
    margin-top: 20px;
}
.overtime{
    border:none;
    font-size: 16px;
    color: #bae3a9;
}
.timeinput{
    font-size: 16px;
}
.time1{
    display: inline-block;
}
.xianshi{
    display: inline-block;
}
.div-css{
display:none;
}
.active{
display:block;
}
.color{
   background-color:#455aa9; 
}
